<template>
  <div>
    <el-row>
      <div>
        <el-col :span="20" :offset="2" style="margin-bottom: 20px">
          <div v-for="(item, index) in channelList" :key="item.id" style="display: inline-block; margin-left: 5px">
            <el-button @click="$router.push(`/channelVideo/${item.id}`)"> {{ item.name }} </el-button>
          </div>
        </el-col>
      </div>

      <!--index视频-->
      <div >
        <!--轮播图-->
        <el-col :span="8" :offset="2">
          <div class="block">
            <el-carousel trigger="click" height="430px">
              <el-carousel-item v-for="item in 4" :key="item">
                <h3 class="small">{{ item }}</h3>
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-col>
        <!--视频-->
        <el-col :span="12">
          <div v-for="(item, index) in videoList" style="display: inline-block; margin-bottom: 30px; margin-left: 5px" @click="$router.push(`/video/${item.id}`)">
            <img :src="item.videoCover" style="width: 300px; height: 168px">
            <div style="font-size: 15px"> {{ item.videoName }} </div>
            <br>
            <div style="font-size: 13px"> {{ item.videoAuthor }} - {{ item.videoDate }} </div>
          </div>
        </el-col>
      </div>
      <!--more视频-->
      <div>
        <el-col :span="20" :offset="2" style="margin-top: 20px">
          <div v-for="(item, index) in videoList" style="display: inline-block; margin-bottom: 30px; margin-right: 5px">
            <img :src="item.videoCover" style="width: 300px; height: 168px">
            <div style="font-size: 15px"> {{ item.videoName }} </div>
            <br>
            <div style="font-size: 13px"> {{ item.videoAuthor }} - {{ item.videoDate }} </div>
          </div>
        </el-col>
      </div>
    </el-row>
  </div>
</template>

<script>
import { listVideo } from '@/api/video'
import { listChannel } from '@/api/channel'

export default {
  data () {
    return {
      currentDate: new Date(),
      videoList: [],
      channelList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 6,
        videoName: null,
        videoType: 0,
        videoIndex: null,
        videoCount: null,
        videoPath: null,
        videoAuthor: null,
        videoDate: null,
        videoTime: null,
        status: 1
      },
      // 查询参数2
      queryParams2: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        description: null
      }
    }
  },
  async created () {
    const res = await listVideo(this.queryParams)
    this.videoList = res.data.rows

    const res2 = await listChannel(this.queryParams2)
    this.channelList = res2.data.rows
  }
}
</script>

<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
